<template>
	<view class="page" :style="[AppSkinVar]">
		<view style="--e-skeleton-swiper-height:375px">
			<e-skeleton :show="loading">
				<e-skeleton-item variant="swiper"></e-skeleton-item>
				<view class="e-p-20">
					<view class="e-flex">
						<view class="e-radius-8 overflow-hidd">
							<e-skeleton-item variant="block">
								<view style="height:40rpx;width: 300rpx;"></view>
							</e-skeleton-item>
						</view>
					</view>
					<view class="e-p-t-20 e-flex">
						<view class="e-radius-8 overflow-hidd">
							<e-skeleton-item variant="block">
								<view style="height:40rpx;width: 600rpx;"></view>
							</e-skeleton-item>
						</view>
					</view>
				</view>
				<view class="e-p-l-20 e-p-r-20 ">
					<view class="e-radius-8 overflow-hidd e-m-b-20">
						<e-skeleton-item variant="block">
							<view style="height:100rpx;"></view>
						</e-skeleton-item>
					</view>
					<view class="e-radius-8 overflow-hidd e-m-b-20">
						<e-skeleton-item variant="block">
							<view style="height:160rpx;"></view>
						</e-skeleton-item>
					</view>
					<view class="e-radius-8 overflow-hidd e-m-b-20">
						<e-skeleton-item variant="block">
							<view style="height:400px;"></view>
						</e-skeleton-item>
					</view>
				</view>
				<view class="fixed-bottom bg-white" style="z-index: 10101;">
					<view class="e-p-20 e-flex">
						<view class="e-flex-1 e-flex e-flex-between e-p-r-30">
							<view class="e-flex " >
								<e-skeleton-item variant="block">
									<view class="img-60"></view>
								</e-skeleton-item>
							</view>
							<view class="e-flex " >
								<e-skeleton-item variant="block">
									<view class="img-60"></view>
								</e-skeleton-item>
							</view>
							<view class="e-flex " >
								<e-skeleton-item variant="block">
									<view class="img-60"></view>
								</e-skeleton-item>
							</view>
						</view>
						<view>
							<view class="e-flex overflow-hidd" style="border-radius: 200rpx">
								<e-skeleton-item variant="block">
									<view style="height:88rpx;width: 360rpx;"></view>
								</e-skeleton-item>
							</view>
						</view>
					</view>
				</view>
			</e-skeleton>
		</view>
		<!-- 商品信息 -->
		<yuncangGoodsInfo class="u-m-b-20" :info="goodsInfo"  @getQRCodeUrl="getQRCodeUrl"></yuncangGoodsInfo>
		<!-- 商品介绍 -->
		<introduction class="u-m-t-20" :info="goodsInfo"></introduction>
		<!-- 底部操作按钮 -->
		<bottom-button :info="goodsInfo" @buy="popupShow = true"></bottom-button>
		<!-- 规格弹窗 -->
		<sku-popup :goodsInfo="goodsInfo" :goodsNum="goodsNum" :primary="AppSkin.primary" :show="popupShow" @close="() => (popupShow = false)" @buy="buy"></sku-popup>
	</view>
</template>

<script>
import introduction from './child/introduction.vue'
import bottomButton from './child/bottomButton.vue'
import skuPopup from './child/skuPopup.vue'
import yuncangGoodsInfo from './child/info.vue'
import { getYuncangGoodsDetail } from 'api/yuncang.js'
import {getGoodsShareUrl} from 'api/goods.js'
import getSaltMixIn from 'common/mixin/getSaltMixIn.js'
import {APP_DOMAIN} from '@/env.js'
// #ifdef PRIVATE || SUBSCRIPTION
import {
	getShareLink
} from 'common/wxInit.js'
// #endif
export default {
	mixins: [getSaltMixIn],
	components: {
		yuncangGoodsInfo,
		introduction,
		bottomButton,
		skuPopup
	},
	data() {
		return {
			loading: false,
			goodsId: '',
			goodsInfo: {},
			goodsNum: 1,
			popupShow: false
		}
	},
	onLoad(opt) {
		if (opt.id) this.goodsId = opt.id
	},
	async onShow() {
		if (this.goodsId) {
			this.loading = true
			try {
				let goodsInfo
				let detail = await getGoodsDetail(this.goodsId)
				if (detail.code == 200) {
					goodsInfo = detail.data
				}
				// let description = await getGoodsDescription({ productId: this.goodsId })
				this.loading = false
				// if (description.code == 200) {
				// 	goodsInfo = { ...goodsInfo, ...description.data }
				// }
				this.goodsInfo = goodsInfo
				// #ifdef APP-PLUS
				uni.$u.mpShare = {
					title: goodsInfo.name,
					path: '',
					imageUrl: this.$fullLink(goodsInfo.imgUrls.split(',')[0]),
					appParams: this.pageParams,
				}
				// #endif

				// #ifdef MP-WEIXIN||MP-ALIPAY
				if (this.isDefaultShare) {
					this.mpShare = {
						title: goodsInfo.name,
						path: '', // 默认为当前页面路径
						imageUrl: this.$fullLink(goodsInfo.imgUrls.split(',')[0])
					}
					uni.$u.mpShare = this.mpShare
				}
				// #endif

				// #ifdef PRIVATE || SUBSCRIPTION
				uni.$u.mpShare = {
					title: goodsInfo.name,
					link: getShareLink(),
					imgUrl: this.$fullLink(goodsInfo.imgUrls.split(',')[0])
				}
				this.mpShareInit()
				// #endif
			} catch (e) {
				console.log(e)
			}
		}
	},
	methods: {
		collect() {
			let api = postAddGoodsCollect
			if (this.goodsInfo.hasCollected == 1) {
				api = postDelGoodsCollect
			}
			api({
				targetId: this.goodsInfo.id
			}).then(res => {
				if (res.code == 200) {
					this.goodsInfo.hasCollected = this.goodsInfo.hasCollected == 1 ? 0 : 1
				}
			})
		},
		// 如果是小程序，获取的是分享卡片上的二维码地址
		// h5获取的是分享的当前页面地址
		getQRCodeUrl (call) {
			getGoodsShareUrl({
				// #ifdef MP-WEIXIN||MP-ALIPAY
				url:'pages/yuncang/goods',
				// #endif
				// #ifndef MP-WEIXIN||MP-ALIPAY
				url:'/pages/yuncang/goods',
				// #endif
				// #ifdef  PRIVATE
				formType:'mp_private',
				// #endif
				// #ifndef  PRIVATE
				formType: getApp().globalData.payFromType,
				// #endif
				scene:this.$getShareUrlScene(`id=${this.goodsId}`)
			}).then(res => {
				call(res)
			})
		},
		buy() {
			if (this.goodsInfo.stock == 0) {
				this.$toastApp('classify.商品库存不足')
				return
			}
			this.popupShow = false
			this.$goTo('/pages/yuncang/previewOrder', {
				repertoryId: this.goodsInfo.id,
				qty: this.goodsNum,
				type: 1
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
}
</style>
-->
